<template>
  <view>
    <view class="info-card item-field zsm-container" >
      <view class="trace-code-info">
        <text>已录入追溯码：{{ yaolist ? yaolist.length : 0 }} 个</text>
      </view>
    </view>

    <view class="container">
      <view class="info-card">
        <view class="item-field">
          <text class="label">随货同行单编号:</text>
          <text class="value">{{ suihuo.outOrderId }}</text>
        </view>
        <view class="item-field">
          <text class="label">发货时间:</text>
          <text class="value">{{ formatTimestamp(suihuo.createTime) }}</text>
        </view>
      </view>

      <!-- 子表数据列表 -->
      <view v-for="(item, index) in suihuozi" :key="index">
        <view class="info-card">
          <!-- 产品名称 -->
          <view class="horizontal-info1">
            <view class="item-field">
              <text class="label">产品名称:</text>
              <text class="value">{{ item.productName }}</text>
            </view>
          </view>

          <!-- 产品信息行 -->
          <view class="horizontal-info3">
            <view class="item-field">
              <text class="label">产品批次:</text>
              <text class="value">{{ item.batch }}</text>
            </view>
            <view class="item-field">
              <text class="label">有效期:</text>
              <text class="value">{{ timestampToStr(item.validityDate, 'yyyy-MM-dd') }}</text>
            </view>
            <view class="item-field">
              <text class="label">产品规格:</text>
              <text class="value">{{ item.productStandards }}</text>
            </view>
          </view>
          <view class="horizontal-info3">
            <view class="item-field">
              <text class="label">单价:</text>
              <text class="value">{{ item.productPrice }}</text>
            </view>
            <view class="item-field">
              <text class="label">数量:</text>
              <text class="value">{{ item.count }}</text>
            </view>
            <view class="item-field">
              <text class="label">总价:</text>
              <text class="value">{{ item.totalPrice }}</text>
            </view>
          </view>

          <!-- 入库数量单独一行 -->
          <view class="horizontal-info2">
            <text class="label">入库数量:</text>
            <input
              type="number"
              :value="item.inCount"
              auto-focus="true"
              @input="handleStockInQuantityInput($event, index)"
              placeholder="请输入入库数量"
              style=" background-color: #eeeeee;text-align: right;padding-right: 20px;"
            />
          </view>
        </view>
      </view>
    </view>
    <view style="height: 150px;"></view>
    <!-- 确定按钮 -->
    <view class="button-container">
      <button class="button1" @click="selesectTaobaobox">添加追溯码</button>
      <button class="button1" @click="handleConfirm">保存</button>
      <button class="button1" @click="pushStatus">推送</button>
    </view>

    <!-- 自定义输入弹窗 -->
    <view class="modal-mask" v-if="showInputModal" @click="closeInputModal"></view>
    <view class="modal-content" v-if="showInputModal" @click.stop>
      <view class="modal-header">
        <text>添加追溯码</text>
        <text class="close-btn" @click="closeInputModal">×</text>
      </view>
      <view class="modal-body">
        <!-- 已保存的数据显示 -->
        <view class="saved-codes" v-if="scanResults.length > 0">
          <text class="saved-label">已添加追溯码：{{scanResults.length}}个</text>
          <view class="codes-container">
            <text 
              v-for="(code, index) in scanResults" 
              :key="index" 
              class="code-item"
            >{{ code }}</text>
          </view>
        </view>
        
        <input
          type="text"
          v-model="inputValue"
          placeholder="请扫描追溯码"
          @input="onInputChange"
          confirm-type="done"
          class="modal-input"
		  :focus="isInputFocus"
		  ref="traceCodeInput"
		  v-if="scanResults.length < 10"
		  maxlength="21"
        />
		<input
		  type="text"
		  placeholder="一次最多添加10个，请点击确定获取信息"
		  disabled
		  v-if="scanResults.length == 10"
		/>
        <button v-show="false" @click="continueScan" class="continue-scan-btn" v-if="scanResults.length <= 9&&inputValue!==''">添加</button>
		<input v-show="false" disabled v-if="scanResults.length > 9||inputValue===''" class="continue-scan-btn1"/>
      </view>
      <view class="modal-footer">
        <button @click="closeInputModal">取消</button>
        <button @click="confirmInput" type="primary">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
import * as SupplierSendOrderApi from '@/api/suppliersendorder/inde.js'; // 随货同行单
import * as SupplierSendOrderItemApi from '@/api/suppliersendorderitem/index.js'; // 随货同行单项
import * as PurPurchaseOrderApi from '@/api/purpurchaseorder/index.js'; // 订单表
import * as PurchaseInOrderApi from '@/api/purchaseinorder/index.js'; // 入库审核单
import * as GmpqrCodeApi from '@/api/gmpqrcode/index.js';
import * as taobaoUrlApi from '@/api/taobaoUrl/index.js' // 追溯码

export default {
  data() {
    return {
      codeList: [],
      product: '', // 存储扫码传递过来的随货同行单
      suihuozi: [],
      suihuo: {},
      subTableData: [], // 新增变量存储订单表子表数据
      yaobox: [],
      yaolist: [], // 追溯码列表
      savedYaolist: [], // 已保存到数据库的追溯码
      purchaseOrderRes: {}, //入库审批单对象
      showInputModal: false, // 控制输入弹窗显示
      inputValue: '', // 输入框的值
      scanResults: [], // 存储多次扫描的结果
      isInputFocus: false,
	  isProcessing: false, // 操作锁，防止并发
	  actionQueue: [] // 操作队列，处理快速点击
    };
  },
  async onLoad(options) {
    this.product = options.data;
    // 根据随货同行查入库审批单
    const purchaseOrder = await PurchaseInOrderApi.getPurPurchaseOrderByOutOrderId(this.product);
    this.purchaseOrderRes = purchaseOrder.data;
    
    if (this.purchaseOrderRes) {  //不为空时，回显追溯码
      const res = await GmpqrCodeApi.getGmpQrCodeByOutOrderId(this.product);
      if (res.data) {
        const codes = res.data.map(item => item.code);
        this.yaolist = codes;
        this.savedYaolist = [...codes];
      }
    }
    this.getList();
  },
  methods: {
    /** 查询列表 */
    async getList() {
      try {
        // 获取随货同行单子表数据
        const res = await SupplierSendOrderApi.getSupplierSendOrderItemListByOutOrderId(this.product);
        this.suihuozi = Array.isArray(res.data) ? res.data : [];

        // 获取随货同行单数据
        const ress = await SupplierSendOrderApi.getSupplierSendOrder(this.product);
        this.suihuo = ress.data;

        // 初始化入库数量和备注
        this.suihuozi.forEach(item => {
          item.inCount = item.count; // 初始化inCount为发货数量
          item.remark = ''; // 初始化备注
        });
      } catch (error) {
        console.error('Error fetching list:', error);
      }
    },

    // 时间戳转换方法
    formatTimestamp(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    handleStockInQuantityInput(event, index) {
      const value = event.target.value;
      this.$set(this.suihuozi, index, { ...this.suihuozi[index], inCount: Number(value) });
    },

    // 处理推送按钮点击事件
    async pushStatus() {
      let num = 0;
      if (this.suihuozi && this.suihuozi.length) {
        for (let i = 0; i <= this.suihuozi.length - 1; i++) {
          num += Number(this.suihuozi[i].inCount || 0);
        }
      }

      if (num != this.yaolist.length) {
        uni.showModal({
          title: '提示',
          content: '录入追溯码数量与随货同行单药品数量不一致，是否推送？',
          success: (res) => {
            if (res.confirm) {
              this.pushStatusss();
            }
          }
        });
      } else {
        this.pushStatusss();
      }
    },

    async pushStatusss() {
      try {
        // 校验入库数量
        for (let item of this.suihuozi) {
          if (item.inCount > item.count) {
            uni.showToast({
              title: '入库数量不能大于发货数量',
              icon: 'none',
              duration: 2000
            });
            return;
          }
        }

        // 更新数据
        await this.updateSuppliersendOrderItem();
        
        if (this.purchaseOrderRes) {
          await this.updatePurchaseInOrder(1);
        } else {
          await this.savePurchaseInOrder(1);
        }

        // 创建追溯码
        if (this.yaolist && this.yaolist.length > 0) {
          await this.createGmpQrCode();
        }

        uni.showToast({
          title: '操作成功',
          icon: 'success',
          duration: 2000
        });

        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } catch (error) {
        uni.showToast({
          title: '操作失败：' + (error.message || '未知错误'),
          icon: 'none',
          duration: 2000
        });
      }
    },

    // 处理确定按钮点击事件
    async handleConfirm() {
      // 校验入库数量
      for (let item of this.suihuozi) {
        if (item.inCount > item.count) {
          uni.showToast({
            title: '入库数量不能大于发货数量',
            icon: 'none',
            duration: 2000
          });
          return;
        }
      }

      try {
        // 更新数据
        await this.updateSuppliersendOrderItem();
        
        if (this.purchaseOrderRes) {
          await this.updatePurchaseInOrder(0);
        } else {
          await this.savePurchaseInOrder(0);
        }

        // 创建追溯码
        if (this.yaolist && this.yaolist.length > 0) {
          await this.createGmpQrCode();
        }

        uni.showToast({
          title: '操作成功',
          icon: 'success',
          duration: 2000
        });

        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } catch (error) {
        uni.showToast({
          title: '操作失败：' + (error.message || '未知错误'),
          icon: 'none',
          duration: 2000
        });
      }
    },

    // 保存采购入库单数据到数据库
    async savePurchaseInOrder(pushStatus) {
      const data = {
        outOrderId: this.product,
        integrateId: this.suihuo.integrateId,
        purchaseOrderId: this.suihuo.purchaseOrderId,
        supplierId: this.suihuo.supplierId,
        status: 0,
        dataStatus: 1, //药品
        deptId: this.suihuo.departmentId,
        pushStatus: pushStatus,
      };
      try {
        await PurchaseInOrderApi.createPurchaseInOrder(data);
        console.log('采购入库单数据保存成功');
      } catch (error) {
        console.error('采购入库单数据保存失败:', error);
      }
    },

    // 根据随货同行单id修改采购入库单数据到数据库
    async updatePurchaseInOrder(pushStatus) {
      const data = {
        outOrderId: this.product,
        integrateId: this.suihuo.integrateId,
        purchaseOrderId: this.suihuo.purchaseOrderId,
        supplierId: this.suihuo.supplierId,
        status: 0,
        dataStatus: 1, //药品
        deptId: this.suihuo.departmentId,
        pushStatus: pushStatus,
      };
      try {
        await PurchaseInOrderApi.updatePurPurchaseOrderByOutOrderId(data);
        console.log('采购入库单数据保存成功');
      } catch (error) {
        console.error('采购入库单数据保存失败:', error);
      }
    },

    // 将suihuozi数据发送给后端
    async updateSuppliersendOrderItem() {
      try {
        await SupplierSendOrderItemApi.updateSupplierSendOrderItems(this.suihuozi);
        console.log('数据更新成功');
      } catch (error) {
        console.error('数据更新失败:', error);
        throw error;
      }
    },

    // 打开输入弹窗
    openInputModal() {
      this.showInputModal = true;
      this.inputValue = '';
	  // 关键逻辑：分步骤触发聚焦
		this.$nextTick(() => {
		  // 第一步：先关闭聚焦状态（重置）
		  this.isInputFocus = false;
		  
		  // 第二步：下一帧再开启聚焦（确保DOM已更新）
		  this.$nextTick(() => {
			this.isInputFocus = true;
			
			// 兼容H5端的备选方案
			if (this.$refs.traceCodeInput && typeof this.$refs.traceCodeInput.focus === 'function') {
			  this.$refs.traceCodeInput.focus();
			}
		  });
		});
    },

    // 关闭输入弹窗
    closeInputModal() {
      this.showInputModal = false;
    },

    // 输入框内容变化
    onInputChange(e) {
      this.inputValue = e.detail.value;
      console.log('输入的内容:', this.inputValue);
	   // 当输入内容长度达到20时，自动触发添加操作
	    if (this.inputValue.length === 20) {
	      // 关键：使用setTimeout延迟触发，确保输入框值已更新
		  setTimeout(() => {
			this.continueScan();
		  }, 0);
	    }else if (this.inputValue.length > 20) {
			console.log('长度大于20清空');
	       // 获取粘贴板内容
			uni.getClipboardData({
			  success: (res) => {
				// 将粘贴板内容赋值给输入框
				this.inputValue = res.data || '';
				console.log('粘贴板内容:', this.inputValue);
			  },
			  fail: (err) => {
				console.error('获取粘贴板内容失败:', err);
				// 失败时清空输入框
				this.inputValue = '';
			  }
			});
	    }
    },

    // // 继续扫描
    // async continueScan() {
    //   const currentInput = this.inputValue.trim();
    //   if (!currentInput) {
    //     uni.showToast({
    //       title: '请先添加追溯码',
    //       icon: 'none'
    //     });
    //     return;
    //   }
      
    //   // 将当前输入添加到扫描结果中
    //   this.scanResults.push(currentInput);
    //   this.inputValue = ''; // 清空输入框，准备下一次扫描
    //   await this.$nextTick(() => {
    //     // 第一步：先关闭聚焦状态（重置）
    //     this.isInputFocus = false;
        
    //     // 第二步：下一帧再开启聚焦（确保DOM已更新）
    //     this.$nextTick(() => {
    //   	this.isInputFocus = true;
      	
    //   	// 兼容H5端的备选方案
    //   	if (this.$refs.traceCodeInput && typeof this.$refs.traceCodeInput.focus === 'function') {
    //   	  this.$refs.traceCodeInput.focus();
    //   	}
    //     });
    //   });
    //   // // 显示成功提示
    //   // uni.showToast({
    //   //   title: '追溯码已添加',
    //   //   icon: 'success',
    //   //   duration: 1000
    //   // });
    // },
	// 继续扫描（优化版）
	  continueScan() {
	    // 如果正在处理中，将操作加入队列等待执行
	    if (this.isProcessing) {
	      this.actionQueue.push(() => this.handleContinueScan());
	      return;
	    }
	    
	    // 直接执行当前操作
	    this.handleContinueScan();
	  },
	
	  // 实际处理逻辑
	  async handleContinueScan() {
	    this.isProcessing = true; // 上锁，防止并发
	    
	    try {
	      const currentInput = this.inputValue.trim();
	      if (!currentInput) {
	        uni.showToast({
	          title: '请先添加追溯码',
	          icon: 'none'
	        });
	        return;
	      }
	      
	      // 添加到结果列表
	      this.scanResults.push(currentInput);
	      
	      // 关键：强制清空并立即更新DOM
	      this.inputValue = '';
	      await this.$nextTick(); // 等待DOM更新完成
	      
	      // 重新聚焦
	      this.isInputFocus = false;
	      await this.$nextTick();
	      this.isInputFocus = true;
	      
	      // H5兼容
	      if (this.$refs.traceCodeInput && typeof this.$refs.traceCodeInput.focus === 'function') {
	        this.$refs.traceCodeInput.focus();
	      }
	    } catch (error) {
	      console.error('处理失败:', error);
	    } finally {
	      this.isProcessing = false; // 解锁
	      
	      // 执行队列中的下一个操作（如果有）
	      if (this.actionQueue.length > 0) {
	        const nextAction = this.actionQueue.shift();
	        nextAction();
	      }
	    }
	  },

    // 确认输入
    async confirmInput() {
      // 添加最后一次输入的值（如果有的话）
      const lastInput = this.inputValue.trim();
      if (lastInput) {
        this.scanResults.push(lastInput);
      }

      if (this.scanResults.length === 0) {
        uni.showToast({
          title: '请先添加追溯码',
          icon: 'none'
        });
        return;
      }

      try {
        // 将所有扫描结果用逗号连接
        const combinedInput = this.scanResults.join(',');
        
        const yaobox = await taobaoUrlApi.getSupplierbox(combinedInput);
		
        const drugInfoList = this.extractCodes(yaobox);
        
        if (Array.isArray(drugInfoList) && drugInfoList.length === 0) {
          uni.showToast({
            title: '追溯码或接口异常',
            icon: 'error',
            duration: 2000
          });
          return;
        }
        
        // 过滤并合并新码
        const uniqueNewCodes = drugInfoList.filter(code => 
            !this.yaolist.includes(code)
        );
        
        if (uniqueNewCodes.length > 0) {
          this.yaolist = [...this.yaolist, ...uniqueNewCodes];
          uni.showToast({
            title: `成功添加${uniqueNewCodes.length}个新码`,
            icon: 'success',
            duration: 2000
          });
        } else {
          uni.showToast({
            title: '没有新码需要添加',
            icon: 'none',
            duration: 2000
          });
        }
        
        // 清空扫描结果
        this.scanResults = [];
        
      } catch (error) {
        console.error('扫描出错:', error);
        uni.showToast({
          title: '追溯码或接口异常',
          icon: 'error',
          duration: 2000
        });
      }
      
      this.closeInputModal();
    },

    // 修改原来的selesectTaobaobox方法
    selesectTaobaobox() {
      this.scanResults = []; // 每次打开弹窗时清空之前的扫描结果
      this.openInputModal();
    },
extractCodes(data) {
  let codes = [];
  
  // 检查是否存在 code_relation_dto 数组
  if (data.alibaba_alihealth_drugtrace_top_yljg_query_relation_response &&
      data.alibaba_alihealth_drugtrace_top_yljg_query_relation_response.result &&
      data.alibaba_alihealth_drugtrace_top_yljg_query_relation_response.result.model_list &&
      data.alibaba_alihealth_drugtrace_top_yljg_query_relation_response.result.model_list.code_relation_dto) {
    
    // 获取 code_relation_dto 数组
    const codeRelationDtoList = data.alibaba_alihealth_drugtrace_top_yljg_query_relation_response.result.model_list.code_relation_dto;
    
    // 遍历数组中的每个元素
    codeRelationDtoList.forEach(dto => {
      if (dto && dto.code_relation_list) {
        // 遍历 code_info 数组
        dto.code_relation_list.code_info.forEach(codeItem => {
          if (codeItem.code_pack_level == "1") {
            codes.push(codeItem.code);
          }
        });
      }
    });
  }
  
  // 检查追溯码数量是否匹配
  let totalAmount = 0;
  if (data.alibaba_alihealth_drugtrace_top_yljg_query_relation_response &&
      data.alibaba_alihealth_drugtrace_top_yljg_query_relation_response.result &&
      data.alibaba_alihealth_drugtrace_top_yljg_query_relation_response.result.model_list &&
      data.alibaba_alihealth_drugtrace_top_yljg_query_relation_response.result.model_list.code_relation_dto) {
    
    const codeRelationDtoList = data.alibaba_alihealth_drugtrace_top_yljg_query_relation_response.result.model_list.code_relation_dto;
    codeRelationDtoList.forEach(dto => {
      const info = dto?.produce_info_list?.produce_info_dto?.[0];
      if (info) {
        totalAmount += Number(info.pkg_amount) || 0;
      }
    });
  }
  
  if (codes.length === totalAmount && totalAmount > 0) {
	// codes去掉重复数据
        const uniqueCodes = [...new Set(codes)];
        return uniqueCodes;
  } else {
    return [];
  }
}
,

    // 创建药品追溯码
    async createGmpQrCode() {
      const newCodes = this.yaolist.filter(code => !this.savedYaolist.includes(code));
      
      if (newCodes.length === 0) {
        console.log('没有新的追溯码需要创建');
        return;
      }
      
      const data = {
        qrCodeList: newCodes,
        outOrderId: this.product,
      };
    
      try {
        const res = await GmpqrCodeApi.createGmpQrCodeList(data);
        console.log('追溯码创建成功', res);
      } catch (error) {
        console.error('追溯码创建失败:', error);
        throw new Error('追溯码保存失败，请重试');
      }
    },

    timestampToStr(timestamp, format = 'yyyy-MM-dd') {
      if (!timestamp || typeof timestamp !== 'number' || timestamp <= 0) {
        return '暂无日期';
      }
      
      const date = new Date(timestamp);
      if (isNaN(date.getTime())) {
        return '无效日期';
      }
      
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      
      return format
        .replace('yyyy', year)
        .replace('MM', month)
        .replace('dd', day)
        .replace('HH', hours)
        .replace('mm', minutes)
        .replace('ss', seconds);
    }
  }
};
</script>

<style>
.container {
  margin-top: 10px;
  padding: 0px 10px;
  background-color: #f5f5f5;
}

.info-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.horizontal-info1 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 5px 0;
}

.horizontal-info2 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.horizontal-info3 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 5px 0;
}

.item-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 2px;
}

.label {
  font-size: 15px;
  color: #333333;
  margin-bottom: 5px;
}

.value {
  font-size: 13px;
  color: #007aff;
}

.button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  padding: 5px 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.zsm-container {
  margin-top: 25px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #ffffff;
  padding: 5px 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  text-align: center;
}

button {
  /* margin: 5px 5px; */
}
.button1 {
  margin: 5px 5px;
}

.trace-code-info {
  color: #666;
  font-size: 14px;
  text-align: center;
}

/* 自定义弹窗样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20px;
  border-radius: 20px 20px 0 0;
  z-index: 1000;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.close-btn {
  font-size: 24px;
  color: #999;
}

.modal-body {
  margin-bottom: 20px;
}

.modal-input {
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 10px;
}

.modal-footer {
  display: flex;
  justify-content: space-around;
}

.modal-footer button {
  width: 40%;
}

/* 已保存码样式 */
.saved-codes {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.saved-label {
  font-size: 14px;
  color: #666;
  display: block;
  margin-bottom: 8px;
}

.codes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.code-item {
  background-color: #007aff;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* 继续扫描按钮样式 */
.continue-scan-btn {
  background-color: #007aff;
  color: white;
  margin-top: 10px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  border: none;
}
.continue-scan-btn1 {
  margin-top: 10px;
  width: 100%;
  height: 40px;
  line-height: 40px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .horizontal-info2 .item-field {
    width: calc(50% - 10px);
  }
  
  .horizontal-info3 .item-field {
    width: calc(33% - 10px);
  }
}
</style>
